<template>
    <div style="padding:10px 0">
      <Tabs value="a">
          <TabPane label="数据列表" name="a">
            <div style="margin-bottom:10px;text-align:right">
              <Button type="primary" @click="listformdata(1)">刷新</Button>
            </div>
            <!-- <Table :columns="tableCol"
            :data="data.list" border
            >
              <template slot-scope="{ row }" v-for="(val, key) in slotConfig" :slot="key">
                <div v-html="createTableTem(val, row)"  :key="key"></div>
              </template>
            </Table> -->
            <div>
              <TableViewCom :col="tableCol" :datas="data.list" :slots="slotConfig" :contextMenu="dataContextMenu"/>
            </div>
            <div style="margin-top:10px">
                <Page :total="data.total"
                :page-size="pageSize" @on-change="listformdata"
                :current="data.pageNo" show-total style="margin-top:10px;text-align:center"/>
            </div>
          </TabPane>
          <TabPane label="表单预览" name="b">
            <div>
              <FORMCOM ref="formcom" :formRules="formRules" :colStyle="colStyleConfig" :formConfig="formStyleConfig" :row="rows"/>
              <div style="margin-top:10px;text-align:right">
                <Button @click="dataSetUp">确认保存数据</Button>
              </div>
            </div>
          </TabPane>
          <TabPane label="HTTP接口" name="c">
            <Table border size="small" :columns="[
              {
                title: '接口描述',
                key: 'linkName'
              },
              {
                title: '接口地址',
                key: 'linkUrl'
              },
              {
                title: '请求方式',
                key: 'meta'
              },
              {
                title: '请求参数',
                slot: 'params'
              }
            ]" :data="httpLinks">
                <template slot="params" slot-scope="{ row }">
                  <div v-if="row.params">
                    <div v-for="(item, i) in row.params" :key="i">
                      <b>{{item.param}}</b>
                      <span class="" style="margin-left:5px">{{item.info}}</span>
                    </div>
                  </div>
                  <div v-else>暂无参数</div>
                </template>
            </Table>
          </TabPane>
      </Tabs>
      <!-- 编辑数据modal -->
      <Modal v-model="dataObj.flag" title="编辑数据" footer-hide>
        <div v-if="dataObj.data">
          <FORMCOM ref="formcomupdate" :formRules="formRules" :colStyle="colStyleConfig" :formConfig="formStyleConfig" :row="rows"/>
          <div style="margin-top:10px;text-align:right">
            <Button @click="dataUpdate(dataObj.data.otherInfo.id)">确认保存数据</Button>
          </div>
        </div>
      </Modal>
    </div>
</template>

<script>
import FORMCOM from '../form_component/FormCom.vue'
import TableViewCom from '../form_component/TableViewCom.vue'
export default {
  name: 'FormData',
  components: {
    FORMCOM: FORMCOM,
    TableViewCom: TableViewCom
  },
  props: {
    fid: '',
    row: [],
    // 表单属性
    formConfig: {
      type: Object,
      default: undefined
    },
    // 行内列样式
    colStyle: {
      type: Object,
      default: undefined
    },
    // 表单验证
    formRules: {},
    // 表头数据
    thFields: [],
    // slot配置
    slotAttr: {}
  },
  watch: {
    'row': {
      handler: function (e) {
        this.rows = e
        this.groupField()
        this.createApiLinks()
      }
    },
    'formConfig': {
      handler: function (e) {
        this.formStyleConfig = e
      }
    },
    'colStyle': {
      handler: function (e) {
        this.colStyleConfig = e
      }
    },
    'fid': {
      handler: function (e) {
        this.formId = e
      }
    },
    'slotAttr': {
      handler: function (e) {
        this.slotConfig = e || {}
      }
    },
    'thFields': {
      handler: function (e) {
        if (e) {
          this.tableCol = []
          e.forEach(item => {
            delete item.__id
            if (!item.hide) {
              this.tableCol.push(item)
            }
          })
        } else {
          this.tableCol = []
        }
      }
    }
  },
  data () {
    return {
      formId: this.fid,
      // 表单字段
      formField: {},
      // 表单格式数据
      rows: this.row,
      // 表单属性样式
      formStyleConfig: this.formConfig || {
        lablePos: 'left',
        // 标签宽度
        labelWidth: 80,
        // 全局组件大小
        size: 'default'
      },
      // 表单列样式
      colStyleConfig: this.colStyle || {},
      // 表头
      tableCol: [],
      // slot配置
      slotConfig: this.slotAttr,
      // 列数据
      dataObj: {
        flag: false,
        data: undefined
      },
      // 表格数据右键菜单
      dataContextMenu: [
        {
          name: '编辑',
          click: (e) => {
            this.dataObj.data = e
            this.dataObj.flag = true
            this.$nextTick(() => {
              let ref = this.$refs.formcomupdate
              for (const key in ref.formField) {
                ref.formField[key] = e[key]
              }
            })
          }
        },
        {
          name: '删除',
          color: '#ed4014',
          click: (e) => {
            let that = this
            this.lseutil.alert('确认删除这条记录？', {
              onOk: () => {
                let load = this.lseutil.loading('正在清除', 6)
                this.lseajax.post(this.lseajax.baseurl + '/api/fromdata/delformdata/' + this.formId, {
                  id: e.otherInfo.id
                }).then((res) => {
                  load.close()
                  if (res.code === 200) {
                    // 刷新列表
                    that.listformdata(1)
                  }
                  this.lseutil.notice({
                    info: res.msg,
                    type: res.code === 200 ? 1 : 2
                  })
                }).catch(res => {
                  load.close()
                })
              }
            })
          }
        }
      ],
      // 数据
      pageSize: 10,
      data: {
        list: [],
        total: 0,
        pageNo: 1
      },
      // 接口表格数据
      httpLinks: []
    }
  },
  methods: {
    groupField () {
      let rows = this.rows
      this.formField = this.lseutil.getGroupField(rows)
    },
    // 创建表格tem代码
    createTableTem (html, row) {
      return this.lseutil.createTableTem(html, row)
    },
    // 读取表单数据
    listformdata (pageNo) {
      if (!this.formId) {
        return
      }
      let load = this.lseutil.loading('正在读取表单数据', 6)
      this.lseajax.get(this.lseajax.baseurl + '/api/fromdata/listformdata/' + this.formId, {
        pageNo: pageNo,
        pageSize: this.pageSize
      }).then((res) => {
        load.close()
        if (res.code === 200) {
          this.data.list = res.data.records
          this.data.pageNo = pageNo
          this.data.total = res.data.total
        } else {
          this.lseutil.notice({
            info: res.msg,
            type: 2
          })
        }
      }).catch(res => {
        load.close()
      })
    },
    // 更新/新建表单数据
    dataSetUp () {
      let that = this
      let data = this.$refs.formcom.formField
      this.$refs.formcom.$refs.form.validate((valid) => {
        if (valid) {
          // console.log(JSON.stringify(data))
          that.ecformdata(data)
        }
      })
    },
    dataUpdate (id) {
      let that = this
      let data = this.$refs.formcomupdate.formField
      this.$refs.formcomupdate.$refs.form.validate((valid) => {
        if (valid) {
          // console.log(JSON.stringify(data))
          that.ecformdata(data, id)
        }
      })
    },
    ecformdata (data, id) {
      let load = this.lseutil.loading('正在保存', 6)
      this.lseajax.post(this.lseajax.baseurl + '/api/fromdata/ecformdata/' + this.formId, {
        id: id,
        fromDataJson: JSON.stringify(data)
      }).then((res) => {
        load.close()
        if (res.code === 200) {
          // 刷新列表
          this.listformdata(1)
        }
        this.lseutil.notice({
          info: res.msg,
          type: res.code === 200 ? 1 : 2
        })
      }).catch(res => {
        load.close()
      })
    },
    // 创建http接口列表数据
    createApiLinks () {
      this.httpLinks = []
      let links = [
        {
          linkName: '新增数据',
          linkUrl: this.lseajax.baseurl + '/api/fromdata/ecformdata/' + this.formId,
          meta: 'post',
          params: [
            {
              param: 'fromDataJson',
              info: '表单的格式化JSON字符串'
            }
          ]
        },
        {
          linkName: '修改数据',
          linkUrl: this.lseajax.baseurl + '/api/fromdata/ecformdata/' + this.formId,
          meta: 'post',
          params: [
            {
              param: 'id',
              info: '数据唯一标识'
            },
            {
              param: 'fromDataJson',
              info: '表单的格式化JSON字符串'
            }
          ]
        },
        {
          linkName: '删除数据',
          linkUrl: this.lseajax.baseurl + '/api/fromdata/delformdata/' + this.formId,
          meta: 'post',
          params: [
            {
              param: 'id',
              info: '数据唯一标识'
            }
          ]
        },
        {
          linkName: '读取数据',
          linkUrl: this.lseajax.baseurl + '/api/fromdata/listformdata/' + this.formId,
          meta: 'get',
          params: [
            {
              param: 'pageNo',
              info: '页码'
            },
            {
              param: 'pageSize',
              info: '每页数量'
            }
          ]
        }
      ]
      this.httpLinks = links
      console.log(links)
    }
  },
  mounted () {
    this.groupField()
    this.createApiLinks()
  }
}
</script>

<style scoped>

</style>
